@use 'sass:map';

@use '../mixins/mixins.scss' as *;
@use '../var/size.scss' as *;

// 尺寸信息
$loadmore-sizes: () !default;
$loadmore-sizes: map-merge(
  (
    'sm': (
      'font-size': 24rpx,
      'dot': 24rpx,
    ),
    '': (
      'font-size': 28rpx,
      'dot': 28rpx,
    ),
    'lg': (
      'font-size': 32rpx,
      'dot': 32rpx,
    ),
    'xl': (
      'font-size': 36rpx,
      'dot': 36rpx,
    ),
  ),
  $loadmore-sizes
);

@include b(loadmore) {
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: map-get(map-get($loadmore-sizes, ''), 'font-size');

  /* 内容 start */
  @include e(content) {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
	
	/* 左右两边的横线 start */
			&::before,
			&::after {
			  content: '';
			  position: absolute;
			  top: 50%;
			  width: 60rpx;
			  height: 1rpx;
			  border-radius: 1000rpx;
			  background-color: var(--tn-color-gray);
			  opacity: .4;
			}
			&::before {
			  left: 0%;
			  transform: translate(calc(-100% - 20rpx), -50%);
			}
			&::after {
			  left: 100%;
			  transform: translate(20rpx, -50%);
			}
			/* 左右两边的横线 end */
  }
  /* 内容 end */
  /* 点内容 start */
  @include e(dot) {
    // width: map-get(map-get($loadmore-sizes, ''), 'dot');
    // height: map-get(map-get($loadmore-sizes, ''), 'dot');
	width: 3px;
	height: 3px;
    border-radius: 50%;
	opacity: .4;
  }
  /* 点内容 end */

  /* 尺寸 start */
  @each $size in $tn-inner-sizes {
    @include m($size) {
      font-size: map-get(map-get($loadmore-sizes, $size), 'font-size');

      @include e(dot) {
        // width: map-get(map-get($loadmore-sizes, $size), 'dot');
        // height: map-get(map-get($loadmore-sizes, $size), 'dot');
        // border-radius: 50%;
      }
    }
  }
  /* 尺寸 end */

  @include when(loading) {
    @include when(loading-icon) {
	@include e(content) {
		  /* 左右两边的横线 start */
		  		&::before,
		  		&::after {
		  		  content: '';
				  display: none;
		  		}
		  		/* 左右两边的横线 end */
			
	}
      @include e(text) {
        margin-left: 10rpx;
      }
    }
  }
}
